<template>
  <n-modal v-model:show="showModal" preset="card" :title="title" :show-icon="false" class="w-800px ">
    <n-form ref="formRef" :model="formValue" :rules="rules" label-width="150" label-placement="left">
      <n-form-item path="type" label="表单类型：">
        <n-select v-model:value="formValue.type" placeholder="请选择表单类型" :options="typeoptions"
          :on-update:value="changetype" :disabled="editType !== 'add'">
        </n-select>
      </n-form-item>
      <n-tabs default-value="bushu" justify-content="space-evenly" type="line">
        <n-tab-pane name="bushu" tab="布局" class="w-full h-500px overflow-y-auto">
          <n-grid x-gap="12">
            <n-gi v-for="(_, item) in formValue" :key="item" :span="24">
              <n-form-item v-if="item === 'span'" :path="item" label="宽度：">
                <n-select v-model:value="formValue.span" placeholder="请输入所在容器的宽度" :options="spanoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'isShow'" :path="item" label="显示：">
                <n-select v-model:value="formValue.isShow" placeholder="请选择是否显示" :options="showoptions">
                </n-select>
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-tab-pane>
        <n-tab-pane name="shuxing" tab="属性" class="w-full h-500px overflow-y-auto">
          <n-grid x-gap="12">
            <n-gi v-for="(_, item) in formValue" :key="item" :span="24">
             <n-form-item v-if="item === 'name'" :path="item" label="插槽名称：">
                <n-input v-model:value="formValue.name" placeholder="请输入插槽名称"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'label'" :path="item" label="标题：">
                <n-input v-model:value="formValue.label" placeholder="请输入标题"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'key'" :path="item" label="key值：">
                <n-input v-model:value="formValue.key" placeholder="请输入key值"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'default'" :path="item" label="默认值：">
                <n-input v-model:value="formValue.default" placeholder="请输入默认值"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'placeholder'" :path="item" label="提示语：">
                <n-input v-model:value="formValue.placeholder" placeholder="请输入提示语"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'inputtype'" :path="item" label="input输入框类型：">
                <n-select v-model:value="formValue.inputtype" placeholder="请选择input输入框类型" :options="inputtypeoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'clearable'" :path="item" label="是否显示清除按钮：">
                <n-select v-model:value="formValue.clearable" placeholder="请选择是否显示清除按钮" :options="clearableoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'disabled'" :path="item" label="是否可编辑：">
                <n-select v-model:value="formValue.disabled" placeholder="请选择是否可编辑" :options="disabledoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'size'" :path="item" label="输入框大小：">
                <n-select v-model:value="formValue.size" placeholder="请选择输入框大小" :options="sizeoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'multiple'" :path="item" label="是否多选：">
                <n-select v-model:value="formValue.multiple" placeholder="请选择是否多选" :options="clearableoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'tooltip'" :path="item" label="是否显示文字：">
                <n-select v-model:value="formValue.tooltip" placeholder="请选择是否显示文字" :options="clearableoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'placement'" :path="item" label="弹出位置：">
                <n-select v-model:value="formValue.placement" placeholder="请选择弹出位置" :options="placementoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'max'" :path="item" label="最大值：">
                <n-input v-model:value="formValue.max" placeholder="请输入最大值"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'min'" :path="item" label="最小值：">
                <n-input v-model:value="formValue.min" placeholder="请输入最小值"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'datatype'" :path="item" label="日期类型：">
                <n-select v-model:value="formValue.datatype" placeholder="请选择日期类型" :options="datatypeoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'round'" :path="item" label="是否是圆形：">
                <n-select v-model:value="formValue.round" placeholder="请选择是否是圆形" :options="clearableoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'valueField'" :path="item" label="value关键字：">
                <n-input v-model:value="formValue.valueField" placeholder="请输入value关键字"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'labelField'" :path="item" label="label关键字：">
                <n-input v-model:value="formValue.labelField" placeholder="请输入label关键字"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'childrenField'" :path="item" label="children关键字：">
                <n-input v-model:value="formValue.childrenField" placeholder="请输入children关键字"></n-input>
              </n-form-item>
              <n-form-item v-if="item === 'filterable'" :path="item" label="是否开启过滤功能：">
                <n-select v-model:value="formValue.filterable" placeholder="请选择是否开启过滤功能" :options="clearableoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'options'" :path="item" label="备选项：">
                  <n-input type="textarea" v-model:value="formValue.options" placeholder="请输入备选项："></n-input>
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-tab-pane>
        <n-tab-pane name="fangfa" tab="方法" class="w-full h-500px overflow-y-auto">
          <n-grid x-gap="12">
            <n-gi v-for="(_, item) in formValue" :key="item" :span="24">
              <n-form-item v-if="item === 'required'" :path="item" label="是否必填：">
                <n-select v-model:value="formValue.required" placeholder="请选择是否必填" :options="clearableoptions">
                </n-select>
              </n-form-item>
              <n-form-item v-if="item === 'maxlength'" :path="item" label="文字最大长度：">
                <n-input v-model:value="formValue.maxlength" placeholder="请输入文字最大长度"></n-input>
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-tab-pane>
      </n-tabs>
    </n-form>
    <template #action>
      <div class="w-full flex justify-end items-center">
        <n-button v-if="editType === 'error'" class="mx-1" @click="getreturn">返回</n-button>
        <n-button class="mx-1" @click="handleClose">关闭</n-button>
        <n-button v-if="editType === 'add' || editType === 'edit'" class="mx-1" type="primary" @click="handleSave">确定
        </n-button>
      </div>
    </template>
  </n-modal>
</template>

<script setup name='Edit' lang='ts'>
import { defineExpose, ref, DefineComponent } from "vue"
interface Formtype {
  id?: string,// id
  isShow: string,  // 显示控制
  span: string,  //  宽度
  label: string, // 标题
  key: string, // 关键字
  default: string, // 默认值
  type: string, // 表单类型
  placeholder?: string,// 提示文字
  inputtype?: string, // input输入框的类型
  clearable?: string, // 清楚按钮
  disabled?: string,// 不可编辑
  size: string, // 大小
  change?: null | Function,  // 改变的回调
  options?: string, // 备选项
  required: string, // 是否必填
  maxlength?: string, // 最大长度
  multiple?: string,  // 是否多选
  tooltip?: string, // 滑块覆盖的提示
  placement?: string, // 提示的弹出位置
  max?: string, // 最大值
  min?: string, // 最小值
  datatype?: string, // 时间选择器的类型
  round?: string,  // 是否是圆形
  valueField?: string,   // 关键字
  labelField?: string, // 关键字
  childrenField?: string,  // 关键字
  filterable?: string,  // 过滤功能
  name:"",  // 插槽名称
}
const formRef = ref<DefineComponent | null>(null)
// 表单数据
const formValue = ref<Formtype | {}>({})
const title = ref<string>("")
const showModal = ref<boolean>(false)
const editType = ref("")
const rules = ref({
  span: [{ required: true, message: "请选择宽度", trigger: ["blur", "change"] }],
})



// 各种备选项
const spanoptions = ref([
  { label: "1", value: "1" },
  { label: "2", value: "2" },
  { label: "3", value: "3" },
  { label: "4", value: "4" },
  { label: "5", value: "5" },
  { label: "6", value: "6" },
  { label: "7", value: "7" },
  { label: "8", value: "8" },
  { label: "9", value: "9" },
  { label: "10", value: "10" },
  { label: "11", value: "11" },
  { label: "12", value: "12" },
  { label: "13", value: "13" },
  { label: "14", value: "14" },
  { label: "15", value: "15" },
  { label: "16", value: "16" },
  { label: "17", value: "17" },
  { label: "18", value: "18" },
  { label: "19", value: "19" },
  { label: "20", value: "20" },
  { label: "21", value: "21" },
  { label: "22", value: "22" },
  { label: "23", value: "23" },
  { label: "24", value: "24" },
])
const showoptions = ref<Array<{ label: string, value: string }>>([
  { label: "显示", value: "1" },
  { label: "隐藏", value: "0" },
])
const typeoptions = ref([
  { label: "插槽", value: "slot" },
  { label: "input输入框", value: "input" },
  { label: "select选择框", value: "select" },
  { label: "radio单选框", value: "radio" },
  { label: "checkbox多选框", value: "checkbox" },
  { label: "slider滑块", value: "slider" },
  { label: "picker日期选择器", value: "picker" },
  { label: "color颜色选择器", value: "color" },
  { label: "switch开关", value: "switch" },
  { label: "cascader级联选择器", value: "cascader" },
  { label: "upload上传", value: "upload" },

])
const inputtypeoptions = ref([
  { label: "文本", value: "text" },
  { label: "文本域", value: "textarea" },
  { label: "密码", value: "password" },
])
const clearableoptions = ref([
  { label: "是", value: "1" },
  { label: "否", value: "0" },
])
const disabledoptions = ref([
  { label: "是", value: "0" },
  { label: "否", value: "1" },
])
const sizeoptions = ref([
  { label: "大", value: "large" },
  { label: "中", value: "medium" },
  { label: "小", value: "small" },
])
const placementoptions = ref([
  { label: "上", value: "top" },
  { label: "下", value: "bottom" },
  { label: "左", value: "left" },
  { label: "右", value: "right" },
])
const datatypeoptions = ref([
  { label: "日期", value: "date" },
  { label: "日期时间", value: "datetime" },
  { label: "日期范围", value: "daterange" },
  { label: "日期时间范围", value: "datetimerange" },
  { label: "月份", value: "month" },
  { label: "月份范围", value: "monthrange" },
  { label: "年", value: "year" },
  { label: "不知道", value: "quarter" },
])
// 初始化函数，新建就传入key，编辑就传入数据
const init = (key: string | null = null, data: Formtype | null = null) => {
  if (key) {
    if (!editType.value) {
      editType.value = "add"
    }
    title.value = "创建"
    switch (key) {
      case "input":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "input", // 表单类型
          placeholder: "请输入",// 提示文字
          inputtype: "text", // input输入框的类型
          clearable: "1", // 清除按钮
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          required: "1",  //  必填
          maxlength: "", // 最大长度
        }
        break;
      case "select":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "select", // 表单类型
          placeholder: "请选择",// 提示文字
          clearable: "1", // 清楚按钮
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
          multiple: "0", // 多选
        }
        break;
      case "radio":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "radio", // 表单类型
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
        }
        break;
      case "checkbox":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "checkbox", // 表单类型
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
        }
        break;
      case "slider":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "slider", // 表单类型
          tooltip: "1", // 滑块显示数字
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
          placement: "top", // 提示弹出位置
          max: "100",  // 最大值
          min: "1", // 最小值
        }
        break;
      case "picker":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "picker", // 表单类型
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          clearable: "1", // 清除按钮
          options: "[]", // 备选项
          required: "1",  //  必填
          placement: "bottom", // 提示弹出位置
          datatype: "datetime",  // 时间类型
        }
        break;
      case "color":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "color", // 表单类型
          tooltip: "1", // 滑块显示数字
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
          placement: "bottom", // 提示弹出位置
        }
        break;
      case "switch":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "switch", // 表单类型
          tooltip: "1", // 滑块显示数字
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
          placement: "top", // 提示弹出位置
          round: "1",  // 是否为圆形  
        }
        break;
      case "cascader":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "cascader", // 表单类型
          tooltip: "1", // 滑块显示数字
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
          placement: "top", // 提示弹出位置
          clearable: "1", // 清除按钮
          filterable: "1",  // 过滤功能
          childrenField: "children", // 下级数据关键字
          valueField: "value",  // value关键字
          labelField: "label",  // field关键字
          multiple: "0", // 多选
          placeholder: "请选择", // 提示语
        }
        break;
      case "upload":
        formValue.value = {
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "upload", // 表单类型
          tooltip: "1", // 滑块显示数字
          disabled: "0",// 不可编辑
          size: "small", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "1",  //  必填
          placement: "top", // 提示弹出位置
          max: "100",  // 最大值
          min: "1", // 最小值
        }
        break;
      case "slot":
        formValue.value = {
          name:"",
          id: "",// id
          isShow: "1",  // 显示控制
          span: "24",  //  宽度
          label: "", // 标题
          key: "", // 关键字
          default: "", // 默认值
          type: "slot", // 表单类型
          placeholder: "",// 提示文字
          inputtype: "", // input输入框的类型
          clearable: "0", // 清楚按钮
          disabled: "0",// 不可编辑
          size: "", // 大小
          change: null,  // 改变的回调
          options: "[]", // 备选项
          required: "0", // 是否必填
          maxlength: "", // 最大长度
          multiple: "0",  // 是否多选
          tooltip: "0", // 滑块覆盖的提示
          placement: "", // 提示的弹出位置
          max: "", // 最大值
          min: "", // 最小值
          datatype: "data", // 时间选择器的类型
          round: "1",  // 是否是圆形
          valueField: "",   // 关键字
          labelField: "", // 关键字
          childrenField: "",  // 关键字
          filterable: "0",  // 过滤功能
        }
        break;
    }
  }
  if (data) {
    if (!editType.value) {
      editType.value = "edit"
    }
    title.value = "编辑"
    formValue.value = data
  }
  showModal.value = true
}
const handleClose = () => {
  showModal.value = false
}


// 切换输入类型
const changetype = (key: string) => {
  init(key)
}

// 点击保存
const handleSave = () => { }
// 点击返回
const getreturn = () => {

}
defineExpose({ init, handleClose })
</script>

<style scoped>
</style>